﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MusicIndex</title>
    <link rel="stylesheet" href="~/css/Header.css">
    <link rel="stylesheet" href="~/css/Content.css">
    <link rel="stylesheet" href="~/css/DengLuTanChuang.css">
    <!-- ------------------------------------------------------------ -->
    <link rel="stylesheet" href="~/iconfont/iconfont.css">
    <!-- 引用Icon图标 -->
    <script src="~/js/jquery-3.6.4.min.js"></script>
    <script src="~/js/jquery-3.4.1.js"></script>
    <style>
        ul li {
            margin:9px;
        }

        #dhlShuRuKuang{
            position:absolute;
            top:0px;
        }
    </style>
</head>
<body>

    <script type="text/javascript">

        //页面启动时触发
        $(document).ready(function () {
            lishuliang();
        })


        //显示评论列表
        function PingLun(id) {
            console.log(id);
            $.ajax({
                //请求方式
                type: 'post',
                //发送请求的地址
                url: '/Music/PLSelect',
                //服务器返回的数据类型
                datatype: 'json',
                //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
                data: { "id": id },
                success: function (data) {
                    //请求成功函数内容
                    console.log(data);
                    var group = $.parseJSON(data);
                    //拼接字符串
                    var str = '';
                    //对数据做遍历，拼接到页面显示
                    for (var i = 0; i < group.length; i++) {
                        str +=
                            '<li>' +
                            '<span>' + group[i].name + '&nbsp;:</span><span>' + group[i].plnr + '</span>' +
                            '</li>';
                    }
                    //放入页面的容器显示
                    $('#' + id).html(str);
                },
                error: function (jqxhr) {
                    //请求失败函数内容
                }
            });
        }

        function lishuliang() {
            temp = document.getElementById('mycarousel');
            lis = temp.getElementsByTagName('li');
            for (var i = 0; i < lis.length; i++) {
                lis[0].style.cssText = "color:#ff0000;font-size:26px;";
                lis[1].style.cssText = "color:#ff6a00;font-size:23px;";
                lis[2].style.cssText = "color:#ffd800;font-size:20px;";
            };

        };
        

    </script>

    <!-- 导航栏 -->
    <div class="Header">
        <div class="Nav">
            <video muted autoplay="autoplay" loop="loop">
                <source src="~/images/weibo_login.mp4" type="video/mp4">
            </video>
            <!--muted：静音播放  注：高版本浏览器对视频静音后可以保证视频自动播放-->
            <!--autoplay：自动播放-->
            <!--loop：循环播放-->

            <div class="Nav-search search">
                <form action="/Music/MusicIndex"  method="get">
                    <input type="text" name="key" placeholder="请输入...">5
                    <button id="dhlShuRuKuang" type="submit"></button>
                </form>
            </div>
        </div>
        <!-- ----------------------------------------------------------- -->
        <div class="dhl">
            <!-- 置顶悬浮导航栏 -->
            <div class="Top-frame">
                <!-- 搜索 -->
                <div class="grid-cell-1 Frame-Sousuo">
                    <div class="Sousuo search">
                        <form action="/Music/MusicIndex" method="get">
                            <input type="text"  name="key" placeholder="请输入...">
                            <button type="submit"></button>
                        </form>
                    </div>
                </div>
                <!-- 按钮 -->
                <div class="grid-cell-2 Frame-Grid">
                    <ul class="grid">
                        <li class="grid-cell-1 Frame-Grid-item">
                            <div id="item-1">
                                <a href="">
                                    <div class="item-2">
                                        <i title="主页" class="iconfont icon-zhuye"></i>
                                    </div>
                                </a>
                            </div>
                        </li>
                        <li class="grid-cell-1 Frame-Grid-item">
                            <div id="item-1">
                                <a href="">
                                    <div class="item-2">
                                        <i title="视频" class="iconfont icon-shipinbofang"></i>
                                    </div>
                                </a>
                            </div>
                        </li>
                        <li class="grid-cell-1 Frame-Grid-item">
                            <div id="item-1">
                                <a href="">
                                    <div class="item-2">
                                        <i title="热门" class="iconfont icon-remen"></i>
                                    </div>
                                </a>
                            </div>
                        </li>
                        <li class="grid-cell-1 Frame-Grid-item">
                            <div id="item-1">
                                <a href="">
                                    <div class="item-2">
                                        <i title="信息" class="iconfont icon-xinxi"></i>
                                    </div>
                                </a>
                            </div>
                        </li>
                        <li class="grid-cell-1 Frame-Grid-item">
                            <div id="item-1">
                                <a href="">
                                    <div class="item-2">
                                        <i title="用户" class="iconfont icon-yonghu"></i>
                                    </div>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- 登录 -->
                <div class="grid-cell-2 Frame-Briefly">
                    <div class="Briefly-DengLu">
                        <div class="Briefly">
                            <button class="Briefly-Denglu" name="adminBtn" onclick="DENGLU()">登录</button>
                            <button id="Briefly-Zhuce" onclick="window.location='/Enroll/EnrollIndex'">注册</button>
                        </div>
                        <div class="QieHuan">
                            <button id="Briefly-Yangshi" class="Hei" onclick="Hei()">黑</button>
                            <button id="Briefly-Yangshi" class="Bai" onclick="Bai()">白</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <!-- ----------------------------------------------------------- -->
    <!-- 主体 -->
    <div class="Content">
        <div class="Weizhi">
            <!-- 左侧 -->
            <div class="Content-User">
                <div class="Content-Top1">
                    <div id="Content-User-Btn">
                        <ul>
                            <li>
                                <a href="#">
                                    <i title="热门" class="iconfont icon-remen">热搜博客</i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i title="热门" class="iconfont icon-xinwen">新闻时要</i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 按钮  	内容展示 -->
            <div class="Content-Dynamic">
                @foreach (var item in ViewBag.MusicList)
                {
                    <div class="Dynamic-Moban">
                        <div id="Moban-img">
                            <img src="~/TouXiang/@item.img" alt="">
                            <p>@item.name</p>
                            <span>@item.jianjie</span>
                        </div>
                        <div id="Moban-neirong">
                            <p>@item.WenBen</p>
                            @if (@item.TuPian != null)
                            {
                                <img src="~/TuPian/@item.TuPian" alt="Alternate Text" style="width:650px;height:auto;" />
                            }
                            @if (@item.ShiPian != null)
                            {
                                <video class="shipian1" controls="controls" style="width:650px;height:auto;">
                                    <source src="~/shipian/@item.ShiPian" type="video/mp4" />
                                </video>
                            }

                        </div>
                        <div id="Moban-lianjie">
                            <button id="aixin" onclick="xinhuan()"><i class="iconfont icon-aixin"></i>@item.XiHuan</button>
                            <button class="check-box" id="pinglun"><i class="iconfont icon-pinglun"></i>评论人數</button>
                            <button id="zhuanfa"><i class="iconfont icon-zhuanfa"></i>@item.ZhuanFa</button>
                            <button type="button" value="@item.PID" onclick="PingLun(this.value)"><i class="iconfont icon-shuaxin"></i>刷新</button>
                        </div>
                        <div class="pinglunqu">
                            <hr>
                            <ul id="@item.PID">
                            </ul>
                        </div>
                    </div>
                }

            </div>

            <!-- 登录 热点 -->
            <div class="Content-Briefly">
                <div class="Content-Top2">
                    <div class="Content-Briefly-DengLu">
                        <div class="DL">
                            <button class="Content-DengLu" name="adminBtn" onclick="DENGLU()">登录</button>
                            <p>还没有账号？<a href="/Enroll/EnrollIndex">立即注册</a></p>
                        </div>
                    </div>
                    <div class="Content-Resou">
                        <span>搜索热榜前十</span>
                        <button>刷新</button>
                        <ul id="mycarousel">
                            @foreach (var item in ViewBag.ReSou)
                            {
                                <li>@item.ReSou</li>
                            }
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ----------------------------------------------------------- -->
    <!-- 弹出框 -->
    <div class="DengLUTuanChuang">
        <!-- 登陆框主体 -->
        @using (Html.BeginForm("MusicIndex", "Music", FormMethod.Post))
        {
            <div id="login" class="login">
                <!-- 登陆框标题 -->
                <div id="login-title" class="login-title">
                    登录博客
                    <span><a id="closeBtn" href="javascript:void(0)">X</a></span>
                </div>
                <!-- 登陆框表单 -->
                <div id="login-form">
                    <div class="login-input">
                        <label>账   号：</label>
                        <input type="text" name="WBName" placeholder="请输入登录名" class="list-input" />
                    </div>

                    <div class="login-input">
                        <label>密   码：</label>
                        <input type="password" name="WBPwd" placeholder="请输入密码" class="list-input" />
                    </div>
                </div>
                <!-- 登陆框登陆按钮 -->
                <input type="submit" name="BtnName" id="loginSubmit" value="登陆博客" class="loginSubmit" />
            </div>
        }

        <!-- 遮盖层 -->
        <div id="bg" class="bg">sada</div>
    </div>
    <!-- -------------------------------------------------------------------- -->
    <script src="~/js/Top-frame.js"></script>
    <script src="~/js/DengLuTanChuang.js"></script>
    <script src="~/js/BeijingBianhua.js"></script>
    <script src="~/js/PingLunQu.js"></script>

</body>
</html>
